<template>
	<view class="project-page">
		<view class="project-page-num" :class="{'num-active' : i+1 == page}" v-for="(item, i) in pageNumList" :key="i" @click="currentChange(i+1)">
			{{i+1}}
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			page: {
				type: Number,
				default: 1
			},
			pageNumList: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				// page: 1
			}
		},
		onLoad() {
	
		},
		methods: {
			currentChange(page){
				this.$emit("currentChange", page)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.project-page{
		// margin-top: 20px;
		padding: 24px 0 64px 0;
		white-space: nowrap;
		overflow-x: auto;
		text-align: center;
		.project-page-num{
			width: 36px;
			height: 36px;
			background: #fff;
			display: inline-block;
			text-align: center;
			line-height: 36px;
			border-radius: 50%;
			margin:0 13px;
			font-size: 18px;
			font-family: OpenSans;
			color: #949BA5;
			cursor: pointer;
		}
		.num-active{
			background: #26bbff;
			color: #fff;
		}
	}
	@media screen and (min-width: 0px) and (max-width:1024px){
		.project-page{
			padding: 10px 0 40px 0;
			.project-page-num{
				height: 20px;
				width: 20px;
				line-height: 20px;
				margin:0 10px;
				font-size: 12px;
			}
			.num-active{
				background: #26bbff;
				color: #fff;
			}
		}
	}
</style>